<template>
    <div class="mr-root">
        <public-header>

        </public-header>
        <div class="d">
            <img class="im" src="../assets/img/a.jpg" alt="">
            <h2>最近上架</h2>
            <router-link to="/comic/more">
                <a href="/" class="more">更多</a>
            </router-link>
        </div>
        <!--最近上架-->
        <ul class="item" v-for="r in xiao">
           
             <li>
               <router-link :to="'/comic/Content/'+r.id+'/'+r.name"> 
                    <div class="img">
                        <img :src=r.images alt="">
                    </div>

                    <div class="geng">
                        <span>{{r.updateInfo}}</span>

                    </div>
                    <div class="name">
                        <span>{{r.name}}</span>
                    </div>
                    <div class="ming">
                        <i class="fa fa-user-o"></i>
                        <span>{{r.author}}</span>
                    </div>
                    <div class="liu">
                        <span>{{r.categoryLabel}}</span>
                    </div>
                </router-link>
            </li>
            
        </ul>
        <div class="biao">
            <img class="im" src="../assets/img/a.jpg" alt="">
            <h2>最近更新</h2> 
            <router-link to="/comic/Two">
                 <a href="/" id="xiaoer">更多</a>
            </router-link>
           
        </div>
        <!--最新更新-->
        <ul class="item" v-for="e in wo">
            <li>
                <router-link :to="'/comic/Content/'+e.id+'/'+e.name">
                <div class="img">
                    <img :src=e.images alt="">
                </div>
                <div class="geng">
                    <span>{{e.updateInfo}}</span>

                </div>
                <div class="name">
                    <span>{{e.name}}</span>
                </div>
                <div class="ming">
                    <i class="fa fa-user-o"></i>
                    <span>{{e.author}}</span>
                </div>
                <div class="liu">
                    <span>{{e.categoryLabel}}</span>
                </div>
                </router-link>
            </li>
        </ul>
        <div class="biao">
            <img class="im" src="../assets/img/a.jpg" alt="">
            <h2>完结漫画</h2> 
            <router-link to="/comic/Six">
            <a href="/" id="duo">更多</a></router-link>
        </div>
        <!--完结-->
        <ul class="item" v-for="q in men">
            <li>
                <router-link :to="'/comic/Content/'+q.id+'/'+q.name">
                <div class="img">
                    <img :src=q.images alt="">
                </div>
                <div class="geng">
                    <span>{{q.updateInfo}}</span>

                </div>
                <div class="name">
                    <span>{{q.name}}</span>
                </div>
                <div class="ming">
                    <i class="fa fa-user-o"></i>
                    <span>{{q.author}}</span>
                </div>
                <div class="liu">
                    <span>{{q.categoryLabel}}</span>
                </div>
                </router-link>
            </li>
        </ul>
     <div class="jiazai">
            <div class="ong">
                <a href="/">
                    <img src="../assets/img/1.png" alt="">
                </a>
                <a href="/">
                    <img src="../assets/img/2.png" alt="">
                </a>
            </div>
            <div class="one2">
                <a href="/">
                    <img src="../assets/img/3.png" alt="">
                </a>
                <a href="/">
                    <img src="../assets/img/4.png" alt="">
                </a>
            </div>
        </div>
           <!--人气排行版-->
               <div class="biao">
            <img class="im" src="../assets/img/a.jpg" alt="">
            <h2>人气排行版</h2>
        </div>
             <div class="content" v-for="a in man">
                 <router-link :to="'/comic/Content/'+a.id+'/'+a.name">
          <div class="img">
              <img :src=a.images alt="">
          </div>
           </router-link>
          <div class="er">
            <p>{{a.name}}</p> <span class="tu"><img src="../assets/img/5.png" alt=""></span>
              <p class="e"><span>作者:</span>{{a.author}}</p>
              <p class="f"><span>类型:</span>{{a.categoryLabel}}</p>
              <p class="g">{{a.updateInfo}}</p>
              <p class="nei">{{a.introduction}}</p>
          </div>
            
      </div>
          <!--热血-->
               <div class="biao">
            <img class="im" src="../assets/img/a.jpg" alt="">
            <h2>热血 
                <router-link to="/comic/Warmblood">
                <span id="more">更多</span></router-link>
                </h2>  
        </div>
        <ul class="item" v-for="b in she">
           
             <li>
               <router-link :to="'/comic/Content/'+b.id+'/'+b.name"> 
                    <div class="img">
                        <img :src=b.images alt="">
                    </div>

                    <div class="geng">
                        <span>{{b.updateInfo}}</span>

                    </div>
                    <div class="name">
                        <span>{{b.name}}</span>
                    </div>
                    <div class="ming">
                        <i class="fa fa-user-o"></i>
                        <span>{{b.author}}</span>
                    </div>
                    <div class="liu">
                        <span>{{b.categoryLabel}}</span>
                    </div>
                </router-link>
            </li>
            
        </ul>
        <!--运动-->
         <div class="biao">
            <img class="im" src="../assets/img/a.jpg" alt="">
            <h2>运动 
                <router-link to="/comic/Sports">
                <span id="more">更多</span></router-link>
                </h2>  
        </div>
        <ul class="item" v-for="c in yun">
           
             <li>
               <router-link :to="'/comic/Content/'+c.id+'/'+c.name"> 
                    <div class="img">
                        <img :src=c.images alt="">
                    </div>

                    <div class="geng">
                        <span>{{c.updateInfo}}</span>

                    </div>
                    <div class="name">
                        <span>{{c.name}}</span>
                    </div>
                    <div class="ming">
                        <i class="fa fa-user-o"></i>
                        <span>{{c.author}}</span>
                    </div>
                    <div class="liu">
                        <span>{{c.categoryLabel}}</span>
                    </div>
                </router-link>
            </li>
            
        </ul>
        <!--科幻-->
           <div class="biao">
            <img class="im" src="../assets/img/a.jpg" alt="">
            <h2>科幻 
                <router-link to="/comic/Science">
                <span id="more">更多</span></router-link>
                </h2>  
        </div>
        <ul class="item" v-for="d in ke">
           
             <li>
               <router-link :to="'/comic/Content/'+d.id+'/'+d.name"> 
                    <div class="img">
                        <img :src=d.images alt="">
                    </div>

                    <div class="geng">
                        <span>{{d.updateInfo}}</span>

                    </div>
                    <div class="name">
                        <span>{{d.name}}</span>
                    </div>
                    <div class="ming">
                        <i class="fa fa-user-o"></i>
                        <span>{{d.author}}</span>
                    </div>
                    <div class="liu">
                        <span>{{d.categoryLabel}}</span>
                    </div>
                </router-link>
            </li>
            
        </ul>
        <!--机甲-->
        <div class="biao">
            <img class="im" src="../assets/img/a.jpg" alt="">
            <h2>机甲 
                <router-link to="/comic/Mech">
                <span id="more">更多</span></router-link>
                </h2>  
        </div>
        <ul class="item" v-for="e in ji">
           
             <li>
               <router-link :to="'/comic/Content/'+e.id+'/'+e.name"> 
                    <div class="img">
                        <img :src=e.images alt="">
                    </div>

                    <div class="geng">
                        <span>{{e.updateInfo}}</span>

                    </div>
                    <div class="name">
                        <span>{{e.name}}</span>
                    </div>
                    <div class="ming">
                        <i class="fa fa-user-o"></i>
                        <span>{{e.author}}</span>
                    </div>
                    <div class="liu">
                        <span>{{e.categoryLabel}}</span>
                    </div>
                </router-link>
            </li>
            
        </ul>
         <div class="biao">
            <img class="im" src="../assets/img/a.jpg" alt="">
            <h2>推理</h2>  
        </div>
        <ul class="item" v-for="f in tui">
           
             <li>
               <router-link :to="'/comic/Content/'+f.id+'/'+f.name"> 
                    <div class="img">
                        <img :src=f.images alt="">
                    </div>

                    <div class="geng">
                        <span>{{f.updateInfo}}</span>

                    </div>
                    <div class="name">
                        <span>{{f.name}}</span>
                    </div>
                    <div class="ming">
                        <i class="fa fa-user-o"></i>
                        <span>{{f.author}}</span>
                    </div>
                    <div class="liu">
                        <span>{{f.categoryLabel}}</span>
                    </div>
                </router-link>
            </li>
            
        </ul>
        <!--搞笑-->
         <div class="biao">
            <img class="im" src="../assets/img/a.jpg" alt="">
            <h2>机甲 
                <router-link to="/comic/Mech">
                <span id="more">更多</span></router-link>
                </h2>  
        </div>
        <ul class="item" v-for="h in gao">
           
             <li>
               <router-link :to="'/comic/Content/'+h.id+'/'+h.name"> 
                    <div class="img">
                        <img :src=h.images alt="">
                    </div>

                    <div class="geng">
                        <span>{{h.updateInfo}}</span>

                    </div>
                    <div class="name">
                        <span>{{h.name}}</span>
                    </div>
                    <div class="ming">
                        <i class="fa fa-user-o"></i>
                        <span>{{h.author}}</span>
                    </div>
                    <div class="liu">
                        <span>{{h.categoryLabel}}</span>
                    </div>
                </router-link>
            </li>
            
        </ul>
         <div class="kong"></div>
        <hfooter></hfooter>
        <back-top></back-top>
        <loading v-if="showload"></loading>
    </div>
</template>
<script>
    import PublicHeader from '../components/Header'
    import loading from '../components/Loding'
    import Hfooter from '../components/Footer'
    import BackTop from '../components/BackTop'
    export default {
        data() {
            return {
                xiao: [],
                showload: true,
                wo: [],
                men: [],
                man:[],
                she:[],
                yun:[],
                ke:[],
                ji:[],
                tui:[],
                gao:[]
            }
        },
        components: {
            PublicHeader, loading, Hfooter, BackTop
        },
        //   轮播图
        created() {
            //  最近上架
            this.axios.get(`https://api.maimengjun.com/index.php?r=cartoonCategory/getCartoonSetListByCategory&id=21&page=1&size=3`)
                .then(data => {
                    this.xiao = data.data.results
                    this.showload = false
                })
                .catch(err => {
                   
                })
            //  最近更新
            this.axios.get(`https://api.maimengjun.com/index.php?r=cartoonCategory/getCartoonSetListByCategory&id=20&page=1&size=3`)
                .then(data => {
                    this.wo = data.data.results
                })
                .catch(err => {
                    
                })
            //   完结动画
            this.axios.get(`https://api.maimengjun.com/index.php?r=cartoonCategory/getCartoonSetListByCategory&id=19&page=1&size=3`)
                .then(data => {
                    this.men = data.data.results
                })
                .catch(err => {
                    
                })
                //   人气排行版
                this.axios.get(`https://api.maimengjun.com/index.php?r=cartoonBillBoard/getCartoonSetListByBillBoard&id=11&page=1&size=3`)
                .then(data=>{
                   this.man=data.data.results
                })
                .catch(err=>{
                    
                })
                // 热血
                this.axios.get(`https://api.maimengjun.com/index.php?r=cartoonCategory/getCartoonSetListByCategory&id=1&page=1&size=3`)
                .then(data=>{
                   this.she=data.data.results
                })
                .catch(err=>{
                    
                })
                // 运动
                this.axios.get(`https://api.maimengjun.com/index.php?r=cartoonCategory/getCartoonSetListByCategory&id=3&page=1&size=3`)
                .then(data=>{
                    this.yun=data.data.results
                })
                .catch(err=>{
                    
                })
        // 科幻
        this.axios.get(`https://api.maimengjun.com/index.php?r=cartoonCategory/getCartoonSetListByCategory&id=4&page=1&size=3`)
        .then(data=>{
            this.ke=data.data.results
        })
        .catch(err=>{
            
        })
        // 机甲
        this.axios.get(`https://api.maimengjun.com/index.php?r=cartoonCategory/getCartoonSetListByCategory&id=5&page=1&size=3`)
         .then(data=>{
           this.ji=data.data.results
         })
         .catch(err=>{
            
         })
        //  推理
        this.axios.get(`https://api.maimengjun.com/index.php?r=cartoonCategory/getCartoonSetListByCategory&id=7&page=1&size=3`)
         .then(data=>{
           this.tui=data.data.results
         })
         .catch(err=>{
             
         })
        //  搞笑
        this.axios.get(`https://api.maimengjun.com/index.php?r=cartoonCategory/getCartoonSetListByCategory&id=5&page=1&size=6`)
        .then(data=>{
           this.gao=data.data.results
        })
        .catch(err=>{
        
        })
        }
    }

</script>

<style scoped>

.content{
    display: flex;
    width: 9rem;
}
.content{
    border-bottom: solid 1px pink;
}
.kong{
    height: 40px;
    width:100%;
    position: absolute;
    bottom: -84rem;
}
.tu>img{
    position: absolute;
    right: 0.2rem;
}
.img{
    margin-bottom: 0.2rem;
}
 .er{
     margin-left: 0.5rem;
     margin-top: 0.5rem;
 }
   .e,.f,.g,.nei {
     color: gray;
 }

 .er>p:nth-child(1){
     font-size: 0.4rem;
     font-weight: bolder;
 }
 .er>p{
     margin-bottom: 0.2rem;
 }
.nei{
    width:6rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}   
a#xiaoer{
    position: absolute;
    right: 0.2rem;
    top: -11.5rem;
}

    .imgs img {
        width: 3.9rem;
        height: 2.5rem;
        margin-bottom: 0.1rem;
        margin-left: 0.3rem;
    }
    .jiazai img {
        width: 4.3rem;
        height: 1.5rem;
        margin-left: 0.4rem;
        margin-bottom: 8px;
    }
    
    .jiazai div {
        flex-basis: 45%;
    }
    
    a {
        color: gray;
    }
    a#duo {
        position: absolute;
        top: -3.2rem;
        right: 10px;
    }
    
    .biao>h2 {
        margin-left: 30px;
        position: relative;
        left: 0.9rem;
        top: -0.7rem;
    }
    
    .biao a {
        position: absolute;
        right: 20px;
        top: 22.2rem;
        width: 0.8rem;
        border: solid 1px #ccc;
        border-radius: 5px;
        text-align: center;
    }
    
    .liu span {
        margin-left: 25px;
         background: #ff4f65;
        color: white;
        display: inline-block;
        width: 110px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
        line-height: 25px;
        position: relative;
        border-radius: 10px 0 10px 0;
        top: -0.7rem;
        font-size: 0.3rem;
    }
    
    .name {
        width: 2rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-left: 22px;
        font-weight: bolder;
        position: relative;
        top: -0.7rem;
    }
    
    .ming {
        font-size: 15px;
        color: #ccc;
        margin-left: 25px;
        width: 2rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        position: relative;
        top: -0.7rem;
    }
    
    .item {
        width: 500px;
    }
    .item{
        position: relative;
        top:-0.3rem;
    }
    .item>li {
        float: left;
        position: relative;
        top:0.2rem;
    }
    
    .img img {
        width: 110px;
        height: 160px;
        margin-left: 20px;
    }
    .im{
        width: 0.7rem;
        height: 0.7rem;
        margin-left: 30px;
    }
     .d h2 {
        position: relative;
        top: -30px;
        left: 70px;
    }
    .title {
        color: white;
        position: relative;
        top: 170px;
    }
     .more{
         position: absolute;
         right: 0.5rem;
         top: 2.7rem;
         width:0.7rem;
         border: solid 1px #ccc;
         border-radius: 5px;
         text-align: center;
     }
    .geng>span {
        font-size: 13px;
        margin-left: 20px;
        display: inline-block;
        width: 110px;
        text-align: center;
        height: 30px;
        line-height: 30px;
        background: rgba(0, 0, 0, .5);
        color: white;
        position: relative;
        top: -1.1rem;
    }
    .d{
        margin-top: 2.5rem;
    }
    #more{
        display: inline-block;
         position: absolute;
         right:1rem;
         top:-22.2rem;
        border-radius: 5px;
        color: gray;
        width: 1rem;
       line-height: 0.5rem;
        text-align: center;
        font-weight: normal;
        border: solid 1px #ccc;
    }
    .mr-root{
        overflow: hidden;
    }
</style>